import React, { Component } from 'react';
import {
  Col,
  Table,
  Space,
  Row,
  Form,
  message,
  Tooltip,
  Input,
  Select,
  Tag,
  Button,
  Typography,
  Card,
  Upload,
  TreeSelect,
  Modal,
} from 'antd';
import {
  EditOutlined,
  PlusOutlined,
  DeleteFilled,
  CloseCircleOutlined,
  UploadOutlined,
  SearchOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {
  querySubjectData,
  editSubject,
  addSubject,
  deleteSubject,
  // uploadPackageFile,
  querySubjectById,
  publishSubject,
} from '../../api3';
import { fileUploadPrompt } from '../../api3/promptMessage.js';
import AdvancedSearchForm from '../../componentJsx/common/searchForm';
import HasPermi from '../../componentJsx/common/hasPermi';
import NewModal from '../../componentJsx/common/NewModal';
import 'antd/dist/antd.css';
import { checkAllNumber } from '../../utils';
import '../../componentCss/component.css';
//字典
import {
  getDictionaryLabel,
  getAjaxurl,
  devProTest,
} from '../../rudexRou/OperatesCookie.js';
const { Text, Link } = Typography;
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bottonListLeft: [
        {
          interceptor: 'tmfsExamPlatform:subjectManagement:add',
          type: 'primary',
          clickFn: () => this.showModal('add'),
          icon: <PlusOutlined />,
          text: '新增',
        },
        {
          interceptor: 'tmfsExamPlatform:subjectManagement:del',
          type: 'danger',
          clickFn: () => this.showModal('delete'),
          text: '删除',
        },
        {
          interceptor: 'tmfsExamPlatform:subjectManagement:edit',
          clickFn: () => this.showPublishModal(2),
          text: '发布',
        },
        {
          interceptor: 'tmfsExamPlatform:subjectManagement:edit',
          clickFn: () => this.showPublishModal(0),
          text: '取消发布',
        },
      ],
      publishModalVisible: false,
      viewModalVisible: false,
      checkLangModalVisible: false,
      addModalVisible: false, //新增的模态框
      deleteModalVisible: false, //删除的模态框
      editModalVisible: false, //修改模态框
      confirmLoading: false, //确认按钮异步等待
      lastLoading: false, //表格等待
      selectedRowKeys: [], //最新表格多选
      selectedRows: [],
      //分页
      total: 0,
      pageSize: 10,
      page: 1,
      //数据
      tableData: [], //最新数据
      //表格列
      tableColumns: [
        {
          title: '题目名称',
          dataIndex: 'title',
          key: 'title',
          width: 240,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '题目类型',
          dataIndex: 'type',
          key: 'type',
          width: 100,
          ellipsis: true,
          // fixed: 'left',
          render: (text) => getDictionaryLabel('questionType', text),
        },
        {
          title: '知识点',
          dataIndex: 'knowledge',
          key: 'knowledge',
          ellipsis: true,
          width: 200,
        },
        {
          title: '可见范围',
          dataIndex: 'scope',
          key: 'scope',
          ellipsis: true,
          width: 80,
          render: (text) => getDictionaryLabel('questionScope', text),
        },
        {
          title: '用途',
          dataIndex: 'purpose',
          key: 'purpose',
          ellipsis: true,
          width: 80,
          render: (text) => getDictionaryLabel('questionPurpose', text),
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true,
          width: 80,
          render: (text) => getDictionaryLabel('questionStatus', text),
        },
        {
          title: '创建人',
          dataIndex: 'createEmpName',
          key: 'createEmpName',
          ellipsis: true,
          width: 160,
          render: (t, r) => `${t}(${r.createEmpNo})`,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          ellipsis: true,
          width: 160,
          render: (text) =>
            text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : text,
        },
        {
          title: '最近修改时间',
          dataIndex: 'updateTime',
          key: 'updateTime',
          ellipsis: true,
          width: 160,
          render: (text) =>
            text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : text,
        },
        {
          title: '操作',
          dataIndex: 'handle',
          ellipsis: true,
          width: 70,
          fixed: 'right',
          align: 'center',
          render: (_, record) => (
            <Space>
              <Tooltip title='查看题目'>
                <div>
                  <HasPermi
                    bottonData={{
                      type: 'link',
                      size: 'small',
                      interceptor: 'tmfsExamPlatform:subjectManagement:query',
                      clickFn: () => this.showModal('view', record),
                      icon: <SearchOutlined />,
                    }}
                  />
                </div>
              </Tooltip>
              {record.status === '2' ||
              record.createEmpNo !== localStorage.getItem('empNo') ? null : (
                <Tooltip title='修改题目'>
                  <div>
                    <HasPermi
                      bottonData={{
                        type: 'link',
                        size: 'small',
                        interceptor: 'tmfsExamPlatform:subjectManagement:edit',
                        clickFn: () => this.showModal('edit', record),
                        icon: <EditOutlined />,
                      }}
                    />
                  </div>
                </Tooltip>
              )}
            </Space>
          ),
        },
      ],
      //查询条件
      searchData: {},
      // 查询条件项配置
      searchForm: [
        {
          type: 'input',
          name: '题目名称',
          code: 'title',
          // options: getDictionaryLabel('questionKnowledge'),
          placeholder: '请输入',
          maxLength: 20,
        },
        {
          type: 'input',
          name: '创建人',
          code: 'str',
          placeholder: '工号/姓名',
          maxLength: 20,
        },
        {
          type: 'select',
          name: '题目类型',
          code: 'type',
          options: getDictionaryLabel('questionType'),
        },

        {
          type: 'select',
          name: '题目用途',
          code: 'purpose',
          options: getDictionaryLabel('questionPurpose'),
        },
        
      ],
      subjectInfo: {
        createEmpName: null,
        createTime: null,
        description: null,
        id: null,
        knowledge: null,
        packageList: [
          {
            client: null,
            id: null,
            language: null,
            questionId: null,
            server: null,
            serverNoBug: null,
          },
        ],
        purpose: null,
        scope: null,
        status: null,
        title: null,
        type: null,
        updateName: null,
        updateTime: null,
      },
      checkedLanguage: null,
      packageList: [],
      htmlString: null,
      showVisibleList: false,
      uploadFormList: [], //默认java，python
      publishStatus: 0,
      visibleList: [
        {
          bd: null,
          bg: null,
          bu: null,
          cu: null,
          id: null,
          questionId: null,
        },
      ],
      deptList: [],
    };
    //减少setstate导致的富文本卡顿
    this.onEditorChange = this.debounce(this.onEditorChange, 500);
  }
  addForm = React.createRef();
  editForm = React.createRef();
  addCard = React.createRef();
  viewForm = React.createRef();

  //获取最新数据
  getData = () => {
    this.setState({ lastLoading: true });
    let searchData = this.state.searchData;
    let data = {};
    for (const key in searchData) {
      if (key == 'str') {
        checkAllNumber(searchData.str)
          ? (data.createEmpNo = searchData.str)
          : (data.createEmpName = searchData.str);
      } else {
        data[key] = searchData[key];
      }
    }
    data.pageSize = this.state.pageSize;
    data.currentPage = this.state.page;
    querySubjectData(data)
      .then((res) => {
        if (res.data.code === 200) {
          if (res.data.data) {
            this.setState({
              total: res.data.data.total,
              tableData: res.data.data.list,
              lastLoading: false,
              selectedRowKeys: [],
              selectedRows: [],
            });
          } else {
            this.setState({
              total: 0,
              tableData: [],
              lastLoading: false,
              selectedRowKeys: [],
              selectedRows: [],
            });
          }
        } else {
          this.setState({ lastLoading: false });
          message.error(res.data.message || '查询数据失败!');
        }
      })
      .catch((err) => {
        this.setState({ lastLoading: false });
        message.error('查询数据失败!');
      });
  };
  //选择行
  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys, selectedRows });
  };
  //修改页数changePage
  changePage = (page, pageSize) => {
    this.setState({ page, pageSize }, () => {
      this.getData();
    });
  };
  //筛选搜索
  execSearch = (data) => {
    this.setState({ searchData: data, page: 1 }, () => {
      this.getData();
    });
  };
  //设置按钮加载动画开关
  buttonLoading = (flag) => {
    this.setState({ confirmLoading: flag });
  };
  //隐藏模态框
  hiddenModal = () => {
    this.setState({
      addModalVisible: false, //新增的模态框
      viewModalVisible: false,
      deleteModalVisible: false, //删除的模态框
      editModalVisible: false, //设置评定人模态框
      confirmLoading: false, //确认按钮异步等待
      publishModalVisible: false,
      subjectInfo: {
        empNo: null,
        empName: null,
        regional: null,
        departmentBD: null,
        departmentBU: null,
        departmentCU: null,
      },
      uploadFormList: [],
      packageList: [],
      showVisibleList: false,
    });
  };
  //显示模态框
  showModal = (name, subjectInfo) => {
    if (name == 'delete' && this.state.selectedRows.length <= 0) {
      message.warn('请从列表选择需要删除的题目');
      return;
    }
    if (subjectInfo) {
      querySubjectById(subjectInfo.id)
        .then((res) => {
          if (res.data.code == 200) {
            let _subjectInfo = res.data.data;
            let visibleList = [];
            _subjectInfo.knowledge = _subjectInfo.knowledge;
            _subjectInfo.description = BraftEditor.createEditorState(
              _subjectInfo.description
            );
            let uploadFormList = [];
            _subjectInfo.packageList.forEach((item) => {
              uploadFormList.push(item.language);
            });
            let showVisibleList = false;
            if (_subjectInfo.scope == '3') {
              showVisibleList = true;
              _subjectInfo.visibleList
                ? _subjectInfo.visibleList.forEach((item) => {
                    let arr = [];
                    if (item.bd) {
                      arr.push('bd' + ':' + item.bd);
                    }
                    if (item.bu) {
                      arr.push('bu' + ':' + item.bu);
                    }
                    if (item.cu) {
                      arr.push('cu' + ':' + item.cu);
                    }
                    visibleList.push(arr.join(','));
                    _subjectInfo.visibleList = visibleList;
                  })
                : (_subjectInfo.visibleList = []);
            } else {
              _subjectInfo.visibleList = [];
            }
            this.setState(
              {
                subjectInfo: _subjectInfo,
                viewModalVisible: name == 'view' ? true : false,
                editModalVisible: name == 'edit' ? true : false,
                uploadFormList: uploadFormList,
                showVisibleList: showVisibleList,
                packageList: _subjectInfo.packageList,
              },
              () => {
                if (name == 'edit') {
                  this.editForm.current.setFieldsValue(_subjectInfo);
                }
              }
            );
          } else {
            message.error(res.data.message || '题目信息查询失败');
          }
        })
        .catch((err) => {
          message.error('题目信息查询失败');
        });
    } else {
      this.setState({
        addModalVisible: name == 'add' ? true : false,
        deleteModalVisible: name == 'delete' ? true : false,
        editModalVisible: name == 'edit' ? true : false,
        downloadModalVisible: name == 'download' ? true : false,
        uploadFormList: ['3', '4'],
      });
    }
  };
  //新增
  add = () => {
    this.addForm.current.validateFields().then((values, error) => {
      if (error) return;
      let flag = false;
      this.state.packageList.forEach((item) => {
        if (!item.server || !item.client) {
          flag = true;
        }
      });
      if (flag) return message.warning('请检查题目包和程序包是否都上传成功', 3);
      if (this.state.packageList.length != this.state.uploadFormList.length) {
        return message.warning('请检查题目包和程序包是否都上传成功', 3);
      }
      if (this.state.packageList.length == 0) {
        return message.warning('请选择语言并上传相应题目包', 3);
      }
      this.buttonLoading(true);
      let _data = this.addForm.current.getFieldsValue();
      let visibleList = [];
      if (_data.visibleList) {
        _data.visibleList.forEach((item) => {
          let obj = {};
          item.split(',').forEach((item1) => {
            let arr = item1.split(':');
            obj[arr[0]] = arr[1];
            obj.bg = '10019045';
          });
          visibleList.push(obj);
        });
      }

      let data = {
        knowledge: _data.knowledge,
        purpose: _data.purpose,
        scope: _data.scope,
        title: _data.title,
        type: _data.type,
        description: _data.description.toHTML(),
        packageList: this.state.packageList,
        visibleList,
      };
      addSubject(data)
        .then((res) => {
          if (res.data.code === 200) {
            message.success('新增成功');
            // this.getData();
            this.setState({ page: 1 }, () => {
              this.getData();
            });
            this.hiddenModal();
          } else {
            this.buttonLoading(false);
            message.error(res.data.message || '新增失败!');
          }
        })
        .catch((err) => {
          this.buttonLoading(false);
          message.error('新增失败!');
        });
    });
  };
  //删除
  delete = () => {
    if (this.state.selectedRows.length <= 0) {
      message.warn('请从列表选择需要删除的题目');
      return;
    }
    this.buttonLoading(true);
    let ids = this.state.selectedRowKeys.toString();
    deleteSubject(ids)
      .then((res) => {
        if (res.data.code === 200) {
          message.success('删除成功');
          this.setState({ page: 1 }, () => {
            this.getData();
          });
          this.hiddenModal();
        } else {
          this.buttonLoading(false);
          message.error(res.data.message || '删除失败!');
        }
      })
      .catch((err) => {
        this.buttonLoading(false);
        message.error('删除失败!');
      });
  };
  //修改
  edit = () => {
    this.editForm.current.validateFields().then((v, error) => {
      if (error) return;
      let flag = false;
      this.state.packageList.forEach((item) => {
        if (!item.server || !item.client) {
          flag = true;
        }
      });
      // console.log(this.state.packageList, this.state.uploadFormList);
      if (flag) return message.warning('请检查题目包和程序包是否都上传成功', 3);
      if (this.state.packageList.length != this.state.uploadFormList.length) {
        return message.warning('请检查题目包和程序包是否都上传成功', 3);
      }
      if (this.state.packageList.length == 0) {
        return message.warning('请选择语言并上传相应题目包', 3);
      }
      this.buttonLoading(true);
      let _data = this.editForm.current.getFieldsValue();
      _data.id = this.state.subjectInfo.id;
      let visibleList = [];
      if (_data.visibleList) {
        _data.visibleList.forEach((item) => {
          let obj = {};
          item.split(',').forEach((item1) => {
            let arr = item1.split(':');
            obj[arr[0]] = arr[1];
            obj.bg = '10019045';
          });
          visibleList.push(obj);
        });
      }
      let data = {
        id: _data.id,
        knowledge: _data.knowledge,
        purpose: _data.purpose,
        scope: _data.scope,
        title: _data.title,
        type: _data.type,
        description: _data.description.toHTML(),
        packageList: this.state.packageList,
        visibleList,
      };
      // console.log(data);
      // return;
      editSubject(data)
        .then((res) => {
          if (res.data.code === 200) {
            message.success('修改成功');
            this.getData();
            this.hiddenModal();
          } else {
            this.buttonLoading(false);
            this.hiddenModal();
            message.error(res.data.message || '修改失败!');
          }
        })
        .catch((err) => {
          this.buttonLoading(false);
          message.error('修改失败!');
          this.hiddenModal();
        });
    });
  };
  //树形选择框值改变
  onTreeSelectChange = (value) => {
    let visibleList = [];
    value.forEach((item) => {
      let obj = {};
      item.split(',').forEach((item1) => {
        let arr = item1.split(':');
        obj[arr[0]] = arr[1];
      });
      visibleList.push(obj);
    });
    // console.log(value);
    // visibleList.forEach((item) => {
    //   console.log(JSON.stringify(item).replace(/\"|{|}/g, ""));
    // });
  };
  //删除卡片
  deleteUploadCard = (key, index) => {
    let uploadFormList = [...this.state.uploadFormList];
    let packageList = [...this.state.packageList];
    packageList.forEach((item, i) => {
      if (item.language == key) packageList.splice(i, 1);
    });
    let i = uploadFormList.indexOf(key);
    uploadFormList.splice(i, 1);
    this.setState({
      uploadFormList,
      packageList,
    });
  };
  //添加卡片
  addUploadCard = () => {
    if (this.state.checkedLanguage === null) {
      message.warning('请选择需要添加的语言');
    } else if (
      this.state.uploadFormList.indexOf(this.state.checkedLanguage) > -1
    ) {
      message.warning('该语言已被选择');
    } else if (this.state.checkedLanguage) {
      let arr = [...this.state.uploadFormList];
      arr.push(this.state.checkedLanguage);
      // let refList = [];
      // arr.map((item, index) => {
      //   refList.push(`uploadCard${index}`);
      // });
      // console.log(refList);
      this.setState({
        uploadFormList: arr,
        checkLangModalVisible: false,
        checkedLanguage: null,
        // refList: refList,
      });
    }
    // return
  };
  //选择语言
  checkLanguage = (value) => {
    this.setState({ checkedLanguage: value });
  };
  //隐藏语言选择框
  hiddenCheckLangModal = () => {
    this.setState({ checkLangModalVisible: false, checkedLanguage: null });
  };
  //显示语言选择框
  showCheckLangModal = () => {
    this.setState({ checkLangModalVisible: true });
  };
  //上传文件
  upload = (obj) => {
    let packageList = [...this.state.packageList];
    let flag = true;
    packageList.forEach((item, index) => {
      if (item.language == obj.language) {
        if (obj.server) {
          item.server = obj.server;
        }
        if (obj.client) {
          item.client = obj.client;
        }
        if (obj.server === null) {
          item.server = null;
        }
        if (obj.client === null) {
          item.client = null;
        }
        flag = false;
      }
      if (item.questionId) item.questionId = obj.questionId;
    });
    if (flag) packageList.push(obj);
    this.setState({ packageList });
  };
  //富文本值改变
  onEditorChange = (htmlString) => {
    // console.log(htmlString);
    // let editorState = BraftEditor.createEditorState(null)
    this.setState({ htmlString });
  };
  //防抖
  debounce(fn, ms = 500) {
    let timeoutId;
    return function() {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        fn.apply(this, arguments);
      }, ms);
    };
  }
  showPublishModal = (publishStatus) => {
    if (this.state.selectedRows.length <= 0) {
      message.warn('请从列表选择需要操作的题目');
      return;
    }
    this.setState({ publishStatus, publishModalVisible: true });
  };
  publish = () => {
    let ids = [];
    let publishStatus = this.state.publishStatus;
    if (this.state.record) {
      ids = [this.state.record.id];
    } else {
      ids = this.state.selectedRowKeys;
    }
    publishSubject({ ids, publishStatus })
      .then((res) => {
        if (res.data.code == 200) {
          message.success('操作成功');
          // this.buttonLoading('false');
          this.hiddenModal();
          this.getData();
        } else {
          message.error(res.data.message || '操作失败');
          this.buttonLoading(false);
        }
      })
      .catch((err) => {
        message.error('操作失败');
        this.buttonLoading(false);
      });
  };
  componentWillMount() {
    const list = JSON.parse(
      localStorage.getItem('deptList') ? localStorage.getItem('deptList') : '[]'
    );
    if (list.length === 0) {
      this.setState({
        isShowSearch: false,
      });
    }
  }
  componentDidMount() {
    this.getData();
    let deptList = JSON.parse(localStorage.getItem('deptList'));
    deptList.forEach((item) => {
      item.value = item.type + ':' + item.value;
      if (item.children && item.children.length) {
        item.children.forEach((item1) => {
          item1.value = item.value + ',' + item1.type + ':' + item1.value;
          if (item1.children && item1.children.length) {
            item1.children.forEach((item2) => {
              item2.value = item1.value + ',' + item2.type + ':' + item2.value;
            });
          }
        });
      }
    });
    this.setState({ deptList });
  }
  //组件销毁时取消setState
  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }
  getDeptName = (code) => {
    const deptList = this.state.deptList;
    let result;
    function searchCode(obj) {
      for (const a in obj) {
        if (obj[a].value == code) {
          result = obj[a].label;
          return;
        }
        if (typeof obj[a] == 'object') searchCode(obj[a]);
      }
    }
    searchCode(deptList);
    return result;
  };
  render() {
    //多选行配置
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const redPoint = () => {
      return (
        <span
          style={{
            marginRight: '4px',
            color: 'rgb(255, 77, 79)',
            height: '14px',
            lineHeight: '14px',
          }}
        >
          *
        </span>
      );
    };
    return (
      <div id='evaluate'>
        <div className='myProjectsBody'>
          <div className='bigContent1'>
            <AdvancedSearchForm
              execSearch={this.execSearch}
              formData={this.state.searchForm}
            />
          </div>
          {/* <div className='segmentationDiv'></div> */}
          <div className='tabstyle'>
            <div className='bigContent1' id='projectDetail'>
              <div className='operatingDiv'>
                <Row justify='space-between'>
                  <Col span={16}>
                    <Space size={0}>
                      {this.state.bottonListLeft.map((item) => (
                        <HasPermi key={item.interceptor} bottonData={item} />
                      ))}
                      {/* <Button
                        onClick={() => this.showModal('add')}
                        icon={<PlusOutlined />}
                      >
                        新增
                      </Button>
                      <Button
                        onClick={() => {
                          this.showModal('delete');
                        }}
                        type='danger'
                      >
                        删除
                      </Button> */}
                    </Space>
                  </Col>
                </Row>
              </div>

              <div className='tableDiff'>
                <Table
                  rowKey='id'
                  loading={this.state.lastLoading}
                  style={{ marginTop: 10 }}
                  scroll={{ x: '100' }}
                  rowSelection={{ type: 'checkbox', ...rowSelection }}
                  columns={this.state.tableColumns}
                  dataSource={this.state.tableData}
                  pagination={{
                    total: this.state.total,
                    pageSize: this.state.pageSize,
                    current: this.state.page,
                    showSizeChanger: true,
                    onChange: this.changePage,
                    onShowSizeChange: this.changePageSize,
                    showTotal: (total) => '共 ' + total + ' 条',
                  }}
                  bordered
                />
              </div>
            </div>
          </div>
        </div>
        {/* 新增 */}
        <NewModal
          modalOptions={{
            width: '90%',
            title: '新增题目',
            destroyOnClose: true,
            visible: this.state.addModalVisible,
            onCancel: this.hiddenModal,
            maskClosable: false,
          }}
          buttonOptions={{
            position: 'center',
            btnList: [
              {
                key: 0,
                onClick: this.add,
                text: '确认',
                type: 'primary',
                loading: this.state.confirmLoading,
              },
              {
                key: 1,
                onClick: this.hiddenModal,
                text: '取消',
              },
            ],
          }}
        >
          <Form
            preserve={false}
            name='addForm'
            ref={this.addForm}
            labelAlign='right'
            labelCol={{ style: { width: 90 } }}
          >
            <Row>
              <Col xs={12} md={12} lg={8} xl={6}>
                <Form.Item
                  label='题目名称'
                  name='title'
                  rules={[{ required: true, message: '请填写' }]}
                >
                  <Input maxLength='50' />
                </Form.Item>
              </Col>
              <Col xs={12} md={12} lg={8} xl={6}>
                <Form.Item
                  label='知识点'
                  name='knowledge'
                  rules={[{ required: true, message: '请填写' }]}
                >
                  <Input maxLength='50' />
                </Form.Item>
              </Col>
              <Col xs={12} md={12} lg={8} xl={4}>
                <Form.Item
                  label='题目类型'
                  name='type'
                  rules={[{ required: true, message: '请选择' }]}
                >
                  <Select
                    placeholder='请选择'
                    optionFilterProp='label'
                    allowClear
                  >
                    {getDictionaryLabel('questionType').map((item) => {
                      return (
                        <Select.Option value={item.code} key={item.code}>
                          {item.label}
                        </Select.Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={12} md={12} lg={8} xl={4}>
                <Form.Item
                  label='题目用途'
                  name='purpose'
                  rules={[{ required: true, message: '请选择' }]}
                >
                  <Select placeholder='请选择' allowClear>
                    {getDictionaryLabel('questionPurpose').map((item) => {
                      return (
                        <Select.Option value={item.code} key={item.code}>
                          {item.label}
                        </Select.Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={12} md={12} lg={8} xl={4}>
                <Form.Item
                  label='可见范围'
                  name='scope'
                  rules={[{ required: true, message: '请选择' }]}
                >
                  <Select
                    placeholder='请选择'
                    allowClear
                    onSelect={(v) => {
                      if (v == '3') {
                        this.setState({ showVisibleList: true });
                      } else {
                        this.setState({ showVisibleList: false });
                      }
                    }}
                  >
                    {getDictionaryLabel('questionScope').map((item) => {
                      return (
                        <Select.Option value={item.code} key={item.code}>
                          {item.label}
                        </Select.Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>
              {this.state.showVisibleList ? (
                <Col xs={24} md={24} xl={16}>
                  <Form.Item
                    label='可见部门'
                    name='visibleList'
                    rules={[{ required: true, message: '请选择' }]}
                  >
                    <TreeSelect
                      style={{ width: '100%' }}
                      // value={this.state.value}
                      dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
                      treeData={this.state.deptList}
                      placeholder='选择公开的部门'
                      multiple
                      onChange={this.onTreeSelectChange}
                    />
                  </Form.Item>
                </Col>
              ) : null}
              <Col span={24}>
                <Form.Item
                  label='题目描述'
                  name='description'
                  rules={[
                    {
                      required: true,
                      validator: (_, value, callback) => {
                        if (!value || value.isEmpty()) {
                          return Promise.reject('请输入正文内容');
                        } else {
                          return Promise.resolve();
                        }
                      },
                    },
                  ]}
                >
                  <BraftEditor
                    contentStyle={{
                      height: '300px',
                      border: '1px solid rgb(217,217,217)',
                      borderTop: 'none',
                    }}
                    controlBarStyle={{
                      border: '1px solid rgb(217,217,217)',
                      borderBottom: 'none',
                    }}
                    // defaultValue={this.state.defaultValue}
                    // value={editorState}
                    onChange={this.onEditorChange}
                    placeholder='请输入描述内容'
                    controls={[
                      'undo',
                      'redo',
                      'separator',
                      'font-size',
                      'line-height',
                      'letter-spacing',
                      'headings',
                      'separator',
                      'text-color',
                      'bold',
                      'italic',
                      'underline',
                      'strike-through',
                      'separator',
                      'superscript',
                      'subscript',
                      'remove-styles',
                      // 'emoji',
                      'separator',
                      'text-indent',
                      'text-align',
                      'separator',
                      'list-ul',
                      'list-ol',
                      'blockquote',
                      'code',
                      'separator',
                      'link',
                      'separator',
                      'hr',
                      // 'separator',
                      // 'media',
                      'separator',
                      'clear',
                    ]}
                    // onSave={() => this.props.submitContent(editorState)}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <p style={{ float: 'left', width: '80px', textAlign: 'right' }}>
            {redPoint()}
            题目文件<span style={{ marginLeft: '2px' }}>:</span>
          </p>
          <Row style={{ marginLeft: '80px' }} gutter={[20, 20]}>
            {this.state.uploadFormList.map((item, index) => {
              return (
                <Col sm={24} md={24} lg={12} xl={12} xxl={8} key={item}>
                  <UploadCard
                    index={index}
                    upload={this.upload}
                    language={item}
                    deleteUploadCard={this.deleteUploadCard}
                    valuesChange={this.valuesChange}
                  />
                </Col>
              );
            })}

            <Col sm={24} md={24} lg={12} xl={12} xxl={8}>
              {/* <Card> */}
              <Button
                style={{
                  width: '100%',
                  height: '100%',
                  fontWeight: '100',
                }}
                icon={<PlusOutlined />}
                onClick={this.showCheckLangModal}
              >
                添加语言
              </Button>
              {/* </Card> */}
            </Col>
          </Row>
          <NewModal
            modalOptions={{
              width: '400px',
              title: '添加语言',
              visible: this.state.checkLangModalVisible,
              onCancel: this.hiddenCheckLangModal,
            }}
            buttonOptions={{
              position: 'right',
              btnList: [
                {
                  key: 1,
                  onClick: this.hiddenCheckLangModal,
                  text: '取消',
                },
                {
                  key: 0,
                  onClick: this.addUploadCard,
                  text: '添加',
                  type: 'primary',
                  // loading: this.state.confirmLoading,
                },
              ],
            }}
          >
            <Select
              value={this.state.checkedLanguage}
              onSelect={this.checkLanguage}
              style={{ width: '100%' }}
              placeholder='请选择需要添加的语言'
            >
              {getDictionaryLabel('questionLanguage').map((item) => {
                return (
                  <Select.Option
                    disabled={
                      this.state.uploadFormList.indexOf(item.code) > -1
                        ? true
                        : false
                    }
                    value={item.code}
                    key={item.code}
                  >
                    {item.label}
                  </Select.Option>
                );
              })}
            </Select>
          </NewModal>
        </NewModal>
        {/* 删除 */}
        <NewModal
          modalOptions={{
            width: '400px',
            title: '删除提示',
            visible: this.state.deleteModalVisible,
            onCancel: this.hiddenModal,
          }}
          buttonOptions={{
            position: 'right',
            btnList: [
              {
                key: 1,
                onClick: this.hiddenModal,
                text: '取消',
              },
              {
                key: 0,
                onClick: this.delete,
                text: '确认删除',
                type: 'danger',
                loading: this.state.confirmLoading,
              },
            ],
          }}
        >
          <DeleteFilled
            style={{
              fontSize: '28px',
              color: '#e00',
              float: 'left',
              backgroundColor: '#f002',
              padding: 8,
              borderRadius: '50%',
            }}
          />
          <div
            style={{
              fontSize: 14,
              marginLeft: 60,
              fontWeight: 700,
              height: 44,
              lineHeight: '44px',
            }}
          >
            删除后不可恢复，请确认是否删除选中题目？
          </div>
        </NewModal>
        {/* 修改 */}
        <NewModal
          modalOptions={{
            width: '90%',
            title: '修改题目信息',
            // destroyOnClose: true,
            forceRender: true,
            visible: this.state.editModalVisible,
            onCancel: this.hiddenModal,
            maskClosable: false,
          }}
          buttonOptions={{
            position: 'center',
            btnList: [
              {
                key: 0,
                onClick: this.edit,
                text: '确认',
                type: 'primary',
                loading: this.state.confirmLoading,
              },
              {
                key: 1,
                onClick: this.hiddenModal,
                text: '取消',
              },
            ],
          }}
        >
          <Form
            preserve={false}
            name='editForm'
            ref={this.editForm}
            labelAlign='right'
            labelCol={{ style: { width: 90 } }}
            // size="small"
          >
            <Row>
              <Col xs={12} md={12} lg={8} xl={6}>
                <Form.Item
                  label='题目名称'
                  name='title'
                  rules={[{ required: true, message: '请填写' }]}
                >
                  <Input maxLength='50' />
                </Form.Item>
              </Col>
              <Col xs={12} md={12} lg={8} xl={6}>
                <Form.Item
                  label='知识点'
                  name='knowledge'
                  rules={[{ required: true, message: '请填写' }]}
                >
                  <Input maxLength='50' />
                </Form.Item>
              </Col>
              <Col xs={12} md={12} lg={8} xl={4}>
                <Form.Item
                  label='题目类型'
                  name='type'
                  rules={[{ required: true, message: '请选择' }]}
                >
                  <Select
                    placeholder='请选择'
                    optionFilterProp='label'
                    allowClear
                  >
                    {getDictionaryLabel('questionType').map((item) => {
                      return (
                        <Select.Option value={item.code} key={item.code}>
                          {item.label}
                        </Select.Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={12} md={12} lg={8} xl={4}>
                <Form.Item
                  label='题目用途'
                  name='purpose'
                  rules={[{ required: true, message: '请选择' }]}
                >
                  <Select placeholder='请选择' allowClear>
                    {getDictionaryLabel('questionPurpose').map((item) => {
                      return (
                        <Select.Option value={item.code} key={item.code}>
                          {item.label}
                        </Select.Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={12} md={12} lg={8} xl={4}>
                <Form.Item
                  label='可见范围'
                  name='scope'
                  rules={[{ required: true, message: '请选择' }]}
                >
                  <Select
                    placeholder='请选择'
                    allowClear
                    onSelect={(v) => {
                      if (v == '3') {
                        this.setState({ showVisibleList: true });
                      } else {
                        this.setState({ showVisibleList: false });
                      }
                    }}
                  >
                    {getDictionaryLabel('questionScope').map((item) => {
                      return (
                        <Select.Option value={item.code} key={item.code}>
                          {item.label}
                        </Select.Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>
              {this.state.showVisibleList ? (
                <Col xs={24} md={24} xl={16}>
                  <Form.Item
                    label='可见部门'
                    name='visibleList'
                    rules={[{ required: true, message: '请选择' }]}
                  >
                    <TreeSelect
                      style={{ width: '100%' }}
                      dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
                      treeData={this.state.deptList}
                      placeholder='选择公开的部门'
                      multiple
                      onChange={this.onTreeSelectChange}
                    />
                  </Form.Item>
                </Col>
              ) : null}
              <Col span={24}>
                <Form.Item
                  label='题目描述'
                  name='description'
                  rules={[
                    {
                      required: true,
                      validator: (_, value, callback) => {
                        if (!value || value.isEmpty()) {
                          return Promise.reject('请输入正文内容');
                        } else {
                          return Promise.resolve();
                        }
                      },
                    },
                  ]}
                >
                  <BraftEditor
                    contentStyle={{
                      height: '300px',
                      border: '1px solid rgb(217,217,217)',
                      borderTop: 'none',
                    }}
                    controlBarStyle={{
                      border: '1px solid rgb(217,217,217)',
                      borderBottom: 'none',
                    }}
                    // defaultValue={this.state.defaultValue}
                    // value={editorState}
                    onChange={this.onEditorChange}
                    placeholder='请输入描述内容'
                    controls={[
                      'undo',
                      'redo',
                      'separator',
                      'font-size',
                      'line-height',
                      'letter-spacing',
                      'headings',
                      'separator',
                      'text-color',
                      'bold',
                      'italic',
                      'underline',
                      'strike-through',
                      'separator',
                      'superscript',
                      'subscript',
                      'remove-styles',
                      // 'emoji',
                      'separator',
                      'text-indent',
                      'text-align',
                      'separator',
                      'list-ul',
                      'list-ol',
                      'blockquote',
                      'code',
                      'separator',
                      'link',
                      'separator',
                      'hr',
                      // 'separator',
                      // 'media',
                      'separator',
                      'clear',
                    ]}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <p style={{ float: 'left', width: '80px', textAlign: 'right' }}>
            {redPoint()}
            题目文件<span style={{ marginLeft: '2px' }}>:</span>
          </p>
          <Row style={{ marginLeft: '80px' }} gutter={[20, 20]}>
            {this.state.uploadFormList.map((item, index) => {
              return (
                <Col sm={24} md={24} lg={12} xl={12} xxl={8} key={item}>
                  <UploadCard
                    index={index}
                    upload={this.upload}
                    language={item}
                    deleteUploadCard={this.deleteUploadCard}
                    valuesChange={this.valuesChange}
                    uploadComponentText={{
                      type: 'success',
                      text: '已上传，如需修改请重新上传',
                      package: this.state.packageList[index],
                    }}
                  />
                </Col>
              );
            })}

            <Col sm={24} md={24} lg={12} xl={12} xxl={8}>
              {/* <Card> */}
              <Button
                style={{
                  width: '100%',
                  height: '100%',
                  fontWeight: '100',
                }}
                icon={<PlusOutlined />}
                onClick={this.showCheckLangModal}
              >
                添加语言
              </Button>
              {/* </Card> */}
            </Col>
          </Row>
          <NewModal
            modalOptions={{
              width: '400px',
              title: '添加语言',
              visible: this.state.checkLangModalVisible,
              onCancel: this.hiddenCheckLangModal,
            }}
            buttonOptions={{
              position: 'right',
              btnList: [
                {
                  key: 1,
                  onClick: this.hiddenCheckLangModal,
                  text: '取消',
                },
                {
                  key: 0,
                  onClick: this.addUploadCard,
                  text: '添加',
                  type: 'primary',
                  // loading: this.state.confirmLoading,
                },
              ],
            }}
          >
            <Select
              value={this.state.checkedLanguage}
              onSelect={this.checkLanguage}
              style={{ width: '100%' }}
              placeholder='请选择需要添加的语言'
            >
              {getDictionaryLabel('questionLanguage').map((item) => {
                return (
                  <Select.Option
                    disabled={
                      this.state.uploadFormList.indexOf(item.code) > -1
                        ? true
                        : false
                    }
                    value={item.code}
                    key={item.code}
                  >
                    {item.label}
                  </Select.Option>
                );
              })}
            </Select>
          </NewModal>
        </NewModal>
        {/* 查看 */}
        <NewModal
          modalOptions={{
            width: '90%',
            title: '查看题目信息',
            destroyOnClose: true,
            // forceRender: true,
            visible: this.state.viewModalVisible,
            onCancel: this.hiddenModal,
            maskClosable: false,
            footer: null,
          }}
          // buttonOptions={""}
        >
          {this.state.viewModalVisible ? (
            <Form
              name='viewForm'
              ref={this.viewForm}
              labelAlign='right'
              labelCol={{ style: { width: 90 } }}
              // size="small"
            >
              <Row>
                <Col xs={12} md={12} lg={8} xl={6}>
                  <Form.Item label='题目名称'>
                    {this.state.subjectInfo.title}
                  </Form.Item>
                </Col>
                <Col xs={12} md={12} lg={8} xl={6}>
                  <Form.Item label='知识点'>
                    {this.state.subjectInfo.knowledge}
                  </Form.Item>
                </Col>
                <Col xs={12} md={12} lg={8} xl={4}>
                  <Form.Item label='题目类型'>
                    {getDictionaryLabel(
                      'questionType',
                      this.state.subjectInfo.type
                    )}
                  </Form.Item>
                </Col>
                <Col xs={12} md={12} lg={8} xl={4}>
                  <Form.Item label='题目用途'>
                    {getDictionaryLabel(
                      'questionPurpose',
                      this.state.subjectInfo.purpose
                    )}
                  </Form.Item>
                </Col>
                <Col xs={12} md={12} lg={8} xl={4}>
                  <Form.Item label='可见范围'>
                    {getDictionaryLabel(
                      'questionScope',
                      this.state.subjectInfo.scope
                    )}
                  </Form.Item>
                </Col>
                {this.state.showVisibleList ? (
                  <Col xs={24} md={24} xl={24}>
                    <Form.Item label='可见部门'>
                      <Space size={[8, 8]} wrap>
                        {this.state.subjectInfo.visibleList.map((item) => {
                          return <Tag key={item}>{this.getDeptName(item)}</Tag>;
                        })}
                      </Space>
                    </Form.Item>
                  </Col>
                ) : null}
                <Col span={24}>
                  <Form.Item label='题目语言'>
                    <Space size={[8, 8]} wrap>
                      {this.state.uploadFormList.map((item, index) => {
                        return (
                          <Tag key={item}>
                            {getDictionaryLabel('language', item)}
                          </Tag>
                        );
                      })}
                    </Space>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label='题目描述'
                    // name='description'
                  >
                    <BraftEditor
                      readOnly={true}
                      controls={[]}
                      contentStyle={{
                        height: '500px',
                        border: '1px solid rgb(217,217,217)',
                        borderTop: 'none',
                      }}
                      controlBarStyle={{
                        border: '1px solid rgb(217,217,217)',
                        borderBottom: 'none',
                      }}
                      defaultValue={this.state.subjectInfo.description}
                      // value={editorState}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          ) : null}
        </NewModal>
        {/* 发布 */}
        <NewModal
          modalOptions={{
            width: '400px',
            title: this.state.publishStatus ? '发布题目' : '取消发布题目',
            visible: this.state.publishModalVisible,
            onCancel: this.hiddenModal,
          }}
          buttonOptions={{
            position: 'right',
            btnList: [
              {
                key: 1,
                onClick: this.hiddenModal,
                text: '取消',
              },
              {
                key: 0,
                onClick: this.publish,
                text: this.state.publishStatus ? '发布' : '取消发布',
                type: 'primary',
                loading: this.state.confirmLoading,
              },
            ],
          }}
        >
          <InfoCircleOutlined
            style={{
              fontSize: '28px',
              color: '#1890FF',
              float: 'left',
              backgroundColor: '#29F2',
              padding: 8,
              borderRadius: '50%',
            }}
          />
          <div
            style={{
              fontSize: 14,
              marginLeft: 60,
              fontWeight: 700,
              height: 44,
              lineHeight: '44px',
            }}
          >
            {this.state.publishStatus
              ? '发布选中的题目？'
              : '取消发布选中的题目？'}
          </div>
        </NewModal>
      </div>
    );
  }
}
//语言上传卡片
class UploadCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      language: this.props.language,
      fileList: [],
      uploading: false,
      packageListItem: {
        client: null,
        id: null,
        language: null,
        questionId: null,
        server: null,
        serverNoBug: null,
      },
    };
    this.uploadForm = React.createRef();
  }
  validateUploadCardForm = () => {
    this.uploadForm.current.validateFields().then((v, error) => {
      if (error) return;
    });
  };
  componentDidMount() {
    // this.props.onRef(this);
  }

  render() {
    return (
      <Card
        bodyStyle={{
          border: '1px solid rgb(217,217,217)',
          padding: '20px 10px ',
          height: 270,
        }}
        bordered={false}
      >
        <Tooltip title='关闭'>
          <Button
            onClick={() => {
              this.props.deleteUploadCard(this.props.language);
            }}
            type='link'
            // danger
            icon={<CloseCircleOutlined style={{ fontSize: 20 }} />}
            style={{ float: 'right' }}
          ></Button>
        </Tooltip>

        <Form
          style={{ marginTop: 0, paddingRight: 0, width: '100%', height: 240 }}
          name='uploadForm'
          ref={this.uploadForm}
          onValuesChange={this.props.valuesChange}
          key={this.props.language}
          labelCol={{ style: { width: 90 } }}
        >
          <Row align='middle'>
            <Col span={24}>
              <Form.Item label='语言'>
                {getDictionaryLabel('language', this.props.language)}
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                label='被测程序包'
                name='testPackage'
                style={{ marginBottom: 0 }}
                rules={[{ required: true, message: '请上传' }]}
              >
                <UploadComponent
                  disabled={this.props.disabled ? true : false}
                  fileType='server'
                  upload={this.props.upload}
                  language={this.props.language}
                  uploadComponentText={
                    this.props.uploadComponentText
                      ? this.props.uploadComponentText
                      : null
                  }
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                label='考试题目包'
                name='examPackage'
                style={{ marginBottom: 0 }}
                rules={[{ required: true, message: '请上传' }]}
              >
                <UploadComponent
                  disabled={this.props.disabled ? true : false}
                  fileType='client'
                  upload={this.props.upload}
                  language={this.props.language}
                  uploadComponentText={
                    this.props.uploadComponentText
                      ? this.props.uploadComponentText
                      : null
                  }
                />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }
}
//上传组件
class UploadComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      language: this.props.language,
      textType: 'secondary',
      text: '请上传文件',
    };
  }
  getText = (type, text) => {
    return <Text type={type}>{text}</Text>;
  };
  componentDidMount() {
    if (
      this.props.uploadComponentText &&
      this.props.uploadComponentText.package &&
      this.props.uploadComponentText.package[this.props.fileType]
    ) {
      this.setState({
        textType: this.props.uploadComponentText.type,
        text: this.props.uploadComponentText.text,
      });
    }
  }
  tooltipTitle = () => {
    return fileUploadPrompt[this.props.language][this.props.fileType].map(
      (item, index) => {
        return <div key={index}>{item}</div>;
      }
    );
  };
  error = (text) => {
    let arr = text.split('@123@');
    Modal.error({
      title: arr[0],
      content: arr.map((item, index) => {
        if (index > 1) return <div key={index}>{item}</div>;
      }),
    });
  };
  render() {
    const _this = this;
    const { uploading, fileList } = this.state;
    const authToken = window.localStorage.getItem('authToken');
    const token = window.localStorage.getItem('refreshToken');
    let isServer;
    if (this.props.fileType == 'server') {
      isServer = true;
    } else {
      isServer = false;
    }
    // let language = getDictionaryLabel('language', this.props.language);
    let language = this.props.language;
    let url =
      getAjaxurl() +
      `/tmfsExamPlatform/question/uploadFile?isServer=${isServer}&language=${language}`;
    if (devProTest() === 'develop') {
      url =
        window.location.origin +
        `/tmfsExamPlatform/question/uploadFile?isServer=${isServer}&language=${language}`;
    }
    const props = {
      action: url,
      name: 'file',
      accept: '.zip',
      headers: {
        refreshToken: token,
        authToken: authToken,
      },
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
            textType: 'secondary',
            text: '请上传文件',
          };
        });
        _this.props.upload({
          language: _this.props.language,
          [_this.props.fileType]: null,
        });
      },
      onChange: (info) => {
        const { status } = info.file;
        if (status !== 'uploading') {
        }
        if (status === 'done') {
          if (info.file.response.code == 200) {
            _this.props.upload({
              language: _this.props.language,
              [_this.props.fileType]: info.file.response.data,
            });
            message.success(`上传成功`, 3);
            this.setState({
              textType: 'success',
              text: '上传成功',
            });
          } else if (info.file.response.code == 500) {
            // message.error(info.file.response.message || `上传失败`, 3);
            this.error(info.file.response.message);
            _this.props.upload({
              language: _this.props.language,
              [_this.props.fileType]: null,
            });
            this.setState({
              textType: 'danger',
              text: info.file.response.message
                ? info.file.response.message.split('@123@')[0]
                : `上传失败，请重新上传`,
            });
          } else {
            message.error(`上传失败，请重新上传`, 3);
            _this.props.upload({
              language: _this.props.language,
              [_this.props.fileType]: null,
            });
            this.setState({
              textType: 'danger',
              text: '上传失败，请重新上传',
            });
          }
        } else if (status === 'error') {
          message.error(`上传失败，请重新上传`, 3);
          _this.props.upload({
            language: _this.props.language,
            [_this.props.fileType]: null,
          });
          this.setState({
            textType: 'danger',
            text: '上传失败，请重新上传',
          });
        }
      },
      // beforeUpload: (file) => {
      //   this.setState((state) => ({
      //     fileList: [file],
      //   }));
      //   return true;
      // },
      // fileList: fileList,
    };
    return (
      <Row gutter={[5, 0]} wrap={false}>
        <Col style={{ width: 150, height: 90 }}>
          {/* <> */}
          <Upload {...props} style={{ width: '100%' }} maxCount={1}>
            <Button icon={<UploadOutlined />}>点击选择文件</Button>
            <span style={{ fontSize: 12, color: '#999' }}>
              {this.props.fileType == 'server'
                ? '注:阅卷用的有BUG程序包'
                : '注:考生用的无BUG程序包'}
            </span>
          </Upload>
          {/* </> */}
        </Col>
        <Col>
          <Tooltip
            title={() => {
              return this.tooltipTitle();
            }}
          >
            <p style={{ lineHeight: '30px', fontSize: '12px' }}>
              {this.getText(this.state.textType, this.state.text)}
            </p>
          </Tooltip>
        </Col>
      </Row>
    );
  }
}

export default Index;
